<style>

    .req-fields li {
        list-style: none;
        cursor: pointer;
        position: relative
    }

    .req-selection-container {
        height: 350px;
        margin: 10px
    }

    .req-select-box {
        width: 250px;
        height: 100%;
        float: left;
        border: 1px solid #ebeef5;
        border-radius: 4px
    }

    .req-arrows-box {
        width: 110px;
        height: 100%;
        float: left;
        position: relative
    }

    .req-select-content {
        width: 100%;
        height: 320px;
        overflow-y: auto;
        overflow-x: hidden
    }

    .req-select-box-title {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-family: å¾®è½¯é›…é»‘;
        padding: 0 6%;
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        background: #f5f7fa;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;
        color: #000
    }

    .req-select-box-title label:before {
        left: -14px !important;
        top: 4px !important
    }

    .req-select-box-title label:after {
        left: -10px !important;
        top: 5px !important
    }

    .req_checkboxs {
        vertical-align: middle
    }

    .req-unselect-ul {
        padding: 10px 0
    }

    .req-selected-ul {
        padding: 10px 0
    }

    .req-select-content li {
        padding: 5px 15px;
        font-size: 12px;
        font-family: å¾®è½¯é›…é»‘
    }

    .req-select-box input[type=checkbox] {
        position: absolute;
        left: 13px;
        top: 3px;
        width: 20px;
        height: 20px;
        opacity: 0
    }

    .req-select-box label {
        position: absolute;
        left: 30px;
        top: 9px;
        height: 20px;
        line-height: 20px
    }

    .req-select-box span {
        padding-left: 20px
    }

    .req-select-box label:before {
        content: '';
        position: absolute;
        left: -14px;
        top: -3px;
        width: 12px;
        height: 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .req-select-box label:after {
        content: '';
        position: absolute;
        left: -10px;
        top: -2px;
        width: 4px;
        height: 8px;
        border: 0;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: #fff;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .req-select-box input[type=checkbox]:checked + label:before {
        background: #00a0e8;
        border-color: #00a0e8
    }

    .req-select-box input[type=checkbox]:checked + label:after {
        background: #00a0e8
    }

    .req-arrow-btns {
        width: 100%;
        position: absolute;
        top: 50%;
        margin-top: -45px
    }

    .btn-cursor {
        background-color: #409eff !important;
        border: 1px solid #409eff !important;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .btn-cursor svg {
        fill: #fff !important;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease
    }

    .req-arrow-btn {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 25px;
        background: #eee;
        margin: 0 auto 5px;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        background-color: #f5f7fa;
        color: #c0c4cc;
        outline: 0;
        font-size: 30px
    }

    .req-arrow-btn svg {
        padding: 11px;
        width: 17px;
        height: 17px;
        color: #fff;
        fill: #c0c4cc
    }

</style>

<script type="text/html" id="req_field_item">
    {{each fields field}}
    <li>
        <input type="checkbox" class="req_checkboxs" id="req-tyue-checkbox-blue-{{field}}"/>
        <label for="req-tyue-checkbox-blue-{{field}}"></label>
        <span>{{field}}</span>
    </li>
    {{/each}}
</script>

<div class="req-fields">
    <div class="req-selection-container">
        <div class="req-select-box req-left" id="req-check">
            <div class="req-select-box-title">
                <input type="checkbox" class="req-checkbox-all" id="req-checkbox-all1"/>
                <label for="req-checkbox-all1"></label>
                <span>选中字段</span>
            </div>
            <div class="req-select-content">
                <ul class="req-unselect-ul selected-fields">

                </ul>
            </div>
        </div>
        <div class="req-arrows-box">
            <div class="req-arrow-btns">
                <button class="req-arrow-btn req-right" id="rightButton">
                    &#8250;
                </button>
                <button class="req-arrow-btn req-left" id="leftButton">
                    &#8249;
                </button>
            </div>
        </div>
        <div class="req-select-box req-right" id="req-all">
            <div class="req-select-box-title">
                <input type="checkbox" class="req-checkbox-all" id="req-checkbox-all2"/>
                <label for="req-checkbox-all2"></label>
                <span>所有字段</span>
            </div>
            <div class="req-select-content">
                <ul class="req-selected-ul req-form-fields" id="reqFields">

                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // var fields = [];

    var tpml = template.compile($("#req_field_item").html());
    //load
    // $.get("/api/bpm/form/one",{id: window.opener.$("#selectForm").val()}, function (msg) {
    //     if(!msg.success){
    //         return
    //     }
    //     $.each(msg.data.form.data ||[], function (i,v) {
    //         fields.push(msg.data.name + ":" + v.title)
    //     })
    //     initFields()
    //
    // },'json');


    console.log(opener.fields)
    $("#reqFields").html(tpml({
        fields: opener.fields
    }))

    $(function () {
        $('.req-checkbox-all').click(function () {
            if ($(this).prop('checked')) {
                $(this).parent().next().find('.req_checkboxs').prop('checked', true);
            } else {
                $(this).parent().next().find('.req_checkboxs').prop('checked', false);
            }
            btn_status();
        })
        $('.req-select-content').on('click', '.req_checkboxs', function (e) {
            var checkedAll = $(this).parents('.req-select-content').prev().find('.req-checkbox-all');
            var checkboxs = $(this).prop('checked');
            if (!checkboxs && checkedAll.prop('checked')) {
                checkedAll.prop('checked', false);
            } else if (checkboxs && !checkedAll.prop('checked')) {
                var lis = $(this).parents('ul').children();
                for (var i = 0; i < lis.length; i++) {
                    if ($(lis[i]).find('.req_checkboxs').prop('checked')) {
                        if (i == lis.length - 1) {
                            checkedAll.prop('checked', true)
                        }
                    } else {
                        break;
                    }
                }
            }
            stopFunc(e);
        });
        $('.req-select-content').on('click', 'li', function () {
            $(this).children('.req_checkboxs').click();
            btn_status();
        })

        function btn_status() {
            var btn1 = document.getElementsByClassName('req-right')[0]
            var btn2 = document.getElementsByClassName('req-left')[1]
            var left_ul = document.getElementsByClassName('req-unselect-ul')
            var right_ul = document.getElementsByClassName('req-selected-ul')
            var left_ul_li = left_ul[0].children
            var right_ul_li = right_ul[0].children
            var left_btn = false
            var right_btn = false
            for (var i = 0; i < left_ul_li.length; i++) {
                if (left_ul_li[i].firstElementChild.checked == true) {
                    left_btn = true
                }
            }
            for (var i = 0; i < right_ul_li.length; i++) {
                if (right_ul_li[i].firstElementChild.checked == true) {
                    right_btn = true
                }
            }
            if (left_btn) {
                btn1.classList.add('btn-cursor')
            } else {
                btn1.classList.remove('btn-cursor')
            }
            if (right_btn) {
                btn2.classList.add('btn-cursor')
            } else {
                btn2.classList.remove('btn-cursor')
            }

        }

        $('.req-arrow-btn').click(function () {
            var checkboxs, origin, target, num = 0;
            if ($(this).hasClass('req-right')) {
                origin = $('.req-unselect-ul');
                target = $('.req-selected-ul');
            } else {
                origin = $('.req-selected-ul');
                target = $('.req-unselect-ul');
            }
            checkboxs = origin.find('.req_checkboxs');
            for (var i = 0; i < checkboxs.length; i++) {
                if ($(checkboxs[i]).prop('checked')) {
                    var that = $(checkboxs[i]).parent().clone();
                    that.children('input').prop('checked', false);
                    target.append(that);
                    $(checkboxs[i]).parent().remove();
                } else {
                    num++;
                }
            }
            if (checkboxs.length == num) {
            } else {
                origin.parent().prev().find('.req-checkbox-all').prop('checked', false);
            }
            btn_status();

            updateData();
        })

        function updateData() {
            var arr = [];
            $(".req-unselect-ul li").each(function () {
                var name = $(this).find("span").text();
                arr.push(name);
            });
            opener.bpmData.nodes[nodeId].fields.required_fields = arr;
        }

        console.log("..",opener.bpmData.nodes[nodeId].fields.required_fields)
        //load
        $.each(opener.bpmData.nodes[nodeId].fields.required_fields, function (i,v) {
            // console.log(v,$(".form-fields label[for=req-tyue-checkbox-blue-"+v+"]"))
            $("#reqFields input[id='req-tyue-checkbox-blue-"+v+"']").click();
        })
        $(".req-arrow-btn.req-left").click()
    });

    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }

</script>

